require("../util.js");
require("../component/components.js");
require("../../jsMt/util.js");
var userCategory=JSON.parse(sessionStorage.getItem("userCategory"));
var userInfo=JSON.parse(sessionStorage.getItem("userInfo"));
if(!userInfo){
    location.href="/loginIndex"
}
var vm = new Vue({
    el:"#channelNav",
    data:{
        isEdit:false,
        userCategory:userCategory,
        categoryList:{},
        userCategory1:[],
        categoryList2:[]
    },
    mounted:function(){
        this.getMainAllCategoryList();
        console.log(this.userCategory)
    },
    methods:{
        //后退
        getBack:function(){
            location.href="/";
        },
        bgimg:function(url){
            url = url?url:"";
            return {
                "background-image":'url("'+url+'"),url("")'
            }
        },
        //获取所有自媒体分类信息
        getMainAllCategoryList:function(){
            var that=this;
            this.ajax({url:"/selfMedia/getMainAllCategoryList",dataType:"json",method:"post"},function(b){
                if(b.json.code==0&&b.json.data){
                    that.categoryList=b.json.data;
                    console.log(that.categoryList)
                    that.getCategory();

                }else{
                    vm.$refs.prompt.toast("获取分类信息列表失败！")
                }
            });

        },
        getCategory:function(){
            var that=this;
            that.categoryList.forEach(function(val){
                var flag = true;
                that.userCategory.forEach(function(key,l){
                    if(val.categoryId==key.categoryId){
                        that.userCategory[l].imgSrc=val.imgSrc;
                        flag = false;
                    }
                });
                if(flag){
                    that.categoryList2.push(val);
                }

            });
            console.log(that.userCategory)
        },
        getEdit:function(){
            this.isEdit=!this.isEdit;
        },
        //删除
        getReduce:function(id){
            var that=this;
            console.log("-----------"+id)
            that.userCategory.forEach(function(val,key){
                if(val.categoryId==id){
                    that.categoryList2.push(val);
                    that.userCategory.splice(key,1);
                }
            });
            console.log(that.userCategory)
        },
        //增加
        getAdd:function(id){
            var that=this;
            console.log("++++++++++"+id)
            that.categoryList2.forEach(function(val,key){
                if(val.categoryId==id){
                    that.userCategory.push(val);
                    that.categoryList2.splice(key,1);
                }
            });
            console.log(that.userCategory)
        },
        //增加自媒体用户分类信息
        addUserCategory:function(){
            var that=this;
            var len=byId('bar').children.length;
            console.log(len)
            var id_arr="";
            var categorys={};
            var category=[];
            for(var i=0; i<len; i++){
                id_arr+=','+ byId('bar').children[i].getAttribute('drag-id');
                categorys.categoryId=byId('bar').children[i].getAttribute('id');
                category.push($.param(categorys));
                //category.push(categorys)
            }
            id_arr=id_arr.substr(1);
            //然后请求后台ajax 这样就完成了拖拽排序
            console.log("排序===========")
            console.log(id_arr);
            console.log(category)
            console.log(JSON.stringify(category))
            var data={
                loginUid:userInfo.id,
                categoryId:category.join("&")
            };
            //data.categoryId=category;
            console.log(JSON.stringify(data))
            console.log(data)
           this.ajax({url:"/selfMedia/addUserCategory",data:data,dataType:"json",traditional:true,method:"post"},function(b){
                if(b.json.code==0){
                    //sessionStorage.setItem("userCategory",JSON.stringify(that.userCategory1));
                    location.href="/";
                }else{
                    vm.$refs.prompt.toast("提交完成失败！")
                }
            });

        }
    },
    watch:{
        isEdit:function(){
            var that=this;
            console.log($(".channelNav-top").height());
            that.$nextTick(function(){
                if(that.isEdit){
                    Sortable.create(byId('bar'), {
                        group: "brick",
                        animation: 150,
                        fallbackClass:"fallClass",
                        // filter: '.channelNav-reduce',
                        // onFilter: function (evt) {
                        //     console.log(evt.item.id)
                        //     that.getReduce(evt.item.id);
                        //     // evt.item.parentNode.removeChild(evt.item);
                        // },
                        onAdd: function (evt){ console.log('onAdd.bar:', evt.item); },
                        onUpdate: function (evt){ console.log('onUpdate.bar:', evt.item); },
                        onRemove: function (evt){ console.log('onRemove.bar:', evt.item); },
                        onStart:function(evt){
                            console.log('onStart.foo:', evt.item);
                        },
                        onEnd: function(evt){ console.log('onEnd.foo:', evt.item);
                            console.log(evt)
                            console.log('拖动前的索引：'+evt.oldIndex);
                            console.log('拖动后的索引：'+evt.newIndex);
                            var id_arr="";
                            for(var i=0, len=evt.from.children.length; i<len; i++){
                                id_arr+=','+ evt.from.children[i].getAttribute('drag-id');
                            }
                            id_arr=id_arr.substr(1);
                            //然后请求后台ajax 这样就完成了拖拽排序
                            console.log(id_arr);
                        }
                    });
                }
            });
        }

    }
});
var byId = function (id) { return document.getElementById(id); };